<template>
  <div class="content">
    <div class="info">
      <div
        v-for="(item,index) in infoList"
        :key="index"
        :class="item.isRight ? 'rightClass' : ''"
      >{{item.label}}{{item.val}}</div>
    </div>
    <div class="showInfo">
      <p>物流信息：</p>
      <i-steps :current="verticalCurrent" direction="vertical">
        <i-step v-for="(item,index) in info.list" :key="index">
          <view slot="title">{{item.content}}</view>
          <view slot="content">{{item.time}}</view>
        </i-step>
      </i-steps>
    </div>
  </div>
</template>

<script>
import { SHOP_FIND_LOGISTICS } from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  data () {
    return {
      verticalCurrent: 1,
      info: {},
      infoList: [
        {
          label: '快递公司：',
          key: 'site',
          val: '',
          isRight: false
        },
        {
          label: '快递号：',
          key: 'no',
          val: '',
          isRight: true
        },
        {
          label: '配送员：',
          key: 'name',
          val: '',
          isRight: false
        },
        {
          label: '电话：',
          key: 'phone',
          val: '',
          isRight: true
        }
      ]
    }
  },
  onShow () {
    this.shopExpressageInfo()
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  created () {},
  methods: {
    shopExpressageInfo () {
      const vm = this
      SHOP_FIND_LOGISTICS(getCurrentPageParams('orderNo'))
        .then(r => {
          if (r.data.code === '0') {
            vm.info = r.data.data
            vm.infoList.forEach(_ => {
              if (_.key === 'site') {
                _.val = r.data.data[_.key] ? r.data.data[_.key] : '暂无'
              } else if (_.key === 'no') {
                _.val = r.data.data[_.key] ? r.data.data[_.key] : '暂无'
              } else if (_.key === 'name') {
                _.val = r.data.data[_.key] ? r.data.data[_.key] : '暂无'
              } else if (_.key === 'phone') {
                _.val = r.data.data[_.key] ? r.data.data[_.key] : '暂无'
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';
.content {
  width: 95%;
  margin: auto;
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 14px;
    div {
      width: 50%;
      line-height: 35px;
    }
    .rightClass {
      text-align: right;
    }
  }
  .showInfo {
    p {
      margin: 20px 0;
    }
  }
}
</style>
